<style lang="less">
  footer~div{
    margin-bottom:0.9rem;
  }
  footer{
    background: #fff;
    height:0.9rem;
    position:fixed;
    bottom:0;
    width: 100%;
    display:flex;
    display:-webkit-flex;
    border-top:1px solid #efefef;
    z-index: 100;
    text-align: center;
    .tabbar{
      width:100%;
      display: flex;
      display: -webkit-flex;
      a{
        flex:2;
        -webkit-flex:2;
        margin: .09rem 0;
        text-decoration: none;
        color: #666;
        font-size: 0.22rem;
        &.on{
          color: #dd2424;
          i{
            display: block;
            margin: auto;
            width: .8rem;
            height: 0.46rem;
            &.home{
              background: url(../assets/image/home-on1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
             }
            &.discover{
              background: url(../assets/image/store-on1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: .52rem 0.52rem;
            }
            &.order{
              background: url(../assets/image/discover-on1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
            }
            &.shopCar{
              background: url(../assets/image/shopCar-on1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
            }
            &.mine{
              background: url(../assets/image/my-on1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
            }
          }
        }
        i{
            display: block;
            margin: auto;
            width: .8rem;
            height: 0.46rem;
            &.home{
              background: url(../assets/image/home1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
             }
            &.discover{
              background: url(../assets/image/store1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
            }
            &.order{
              background: url(../assets/image/discover1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
            }
            &.shopCar{
              background: url(../assets/image/shopCar1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
            }
            &.mine{
              background: url(../assets/image/my1.png) center center no-repeat;
              -webkit-background-size: 0.52rem 0.52rem;
              background-size: 0.52rem 0.52rem;
            }
          }
      }
    }
  }
</style>
<template>
  <footer>
    <div class="tabbar">
      <router-link to="/homepage" active-class="on">
        <div class="item-link">
          <i class="home"></i>
          首页
        </div>
      </router-link>
      <router-link to="/store" active-class="on">
        <div class="item-link on">
          <i class="discover"></i>
          4S门店
        </div>
      </router-link>
      <router-link to="/discover" active-class="on">
        <div class="item-link">
          <i class="order"></i>
          发现
        </div>
      </router-link>
      <router-link to="/shoppingCart" active-class="on">
        <div class="item-link">
          <i class="shopCar"></i>
          购物车
        </div>
      </router-link>
      <router-link to="/mine" active-class="on">
        <div class="item-link">
          <i class="mine"></i>
          我的
        </div>
      </router-link>
    </div>
  </footer>
</template>
<script type="text/babel">
    import { setCookie, getCookie } from '../util/commonUtils';
    export default{
      name:'footBar',
      created(){

      },
      methods:{
      },
      data(){
        return {
          main:{
            iconOff:"../assets/logo.png",
            iconOn:"../assets/logo.png",
            on:true
          },
          chooseCar:{
            iconOff:"../assets/logo.png",
            iconOn:"../assets/logo.png",
            on:true
          },
          carLife:{
            iconOff:"../assets/logo.png",
            iconOn:"../assets/logo.png",
            on:true
          },
          mine:{
            iconOff:"../assets/logo.png",
            iconOn:"../assets/logo.png",
            on:true
          }
        }
      }
    }
</script>
